<template>
  <div class="app-container alarm">
    <div class="alarm-header">
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="_fetchAlarmData"/>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="告警名称">
        <template slot-scope="scope">
          <span>{{ scope.row.alertname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="告警节点">
        <template slot-scope="scope">
          <span>{{ scope.row.instance }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.start ? new Date(Date.parse(new Date(scope.row.start))).Format("yyyy-MM-dd hh:mm:ss") : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.end ? new Date(Date.parse(new Date(scope.row.end))).Format("yyyy-MM-dd hh:mm:ss") : '-' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAlarmList } from '@/api/alarm'

export default {
  data() {
    return {
      list: null,
      time: '',
      listLoading: true
    }
  },
  created() {
    // 设置默认调用一天数据
    const nowTime = new Date()
    const yesterDayTime = new Date(nowTime.getTime() - 3600 * 1000 * 24)
    this.time = [yesterDayTime, nowTime]
    this._fetchAlarmData()
  },
  methods: {
    // 查询告警列表
    _fetchAlarmData() {
      this.listLoading = true
      let query = ''
      if (this.time[0] && this.time[1]) {
        query = `?start_time=${this.time[0].getTime()}&end_time=${this.time[1].getTime()}`
      } else {
        query = ''
      }
      getAlarmList(query).then(res => {
        if (res.message.code === 0) {
          this.listLoading = false
          this.list = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alarm {
  &-header {
    padding-bottom: 10px;
    .header-title {
      font-size: 14px;
      font-weight: 700;
    }
    .header-title-left {
      float: right;
      height: 40px;
      line-height: 40px;
    }
  }
  .alarm-header {
    padding: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #303133;
  }
  label {
    font-weight: normal
  }
  .table-action {
    color: #4285f4;
  }
  .table-link {
    color: #4285f4;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
